<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>分享设置</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="./css/set_share.css">
		<style type="text/css">
			.layui-form-label {
				width: 100px;
			}
			
			.layui-upload-list {
				margin-left: 20px;
				margin-top: 10px;
			}
			
			#demoText {
				margin-top: 5px;
			}
			#demoText2{
				margin-top: 5px;
			}
		</style>
	</head>

	<body>
		<div id="backstage" class="layui-layout layui-layout-admin">
			<union-header :header="header"></union-header>
			<uniocn-side :side="side"></uniocn-side>
			<div class="layui-body">
				<!-- 内容主体区域 -->
				<div class="finance-com">
					<div class="finance-title" style="background: #fff;padding-bottom: 0;border-bottom: 1px solid #1AB394">
						<button class="layui-btn layui-btn-ms">分享设置</button>
					</div>

					<div class="finance-modular">
						<form action="##" class="layui-form">
							<p style="box-sizing: border-box;padding: 10px;background: #F8F8F8;">系统设置</p>
							<div style="box-sizing: border-box;padding: 10px ;background: #fff">
								<div class="layui-form-item">
									<label class="layui-form-label" style="width: 100px;">分享标题</label>
									<div class="layui-input-inline" style="width: 300px;">
										<input name="title" type="text" required lay-verify="required" autocomplete="off" class="layui-input">
									</div>
								</div>
								
								<div class="layui-form-item">
									<label class="layui-form-label">分享图片</label>
									<div class="layui-input-block">
										<div class="layui-upload">
											<button type="button" class="layui-btn" id="test1">上传图片</button>
											<div class="layui-upload-list">
												<img class="layui-upload-img" style="width: 120px;" id="demo1">
												<p id="demoText"></p>
											</div>
										</div>
									</div>
								</div>
								
								<div class="layui-form-item">
									<label class="layui-form-label" style="width: 100px;">分享描述</label>
									<div class="layui-input-inline" style="width: 300px;">
										<input name="desc" type="text" required lay-verify="required" autocomplete="off" class="layui-input">
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label" style="width: 100px;">引导关注</label>
									<div class="layui-input-inline" style="width: 300px;">
										<input type="radio" name="set" value="开启" title="开启">
										<input type="radio" name="set" value="关闭" title="关闭" checked>
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label" style="width: 100px;">关注链接</label>
									<div class="layui-input-inline" style="width: 300px;">
										<input name="link" type="text" required lay-verify="required" autocomplete="off" class="layui-input" placeholder="用户未关注的引导页面，建议使用短链接">
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">关注二维码</label>
									<div class="layui-input-block">
										<div class="layui-upload">
											<button type="button" class="layui-btn" id="test2">上传图片</button>
											<div class="layui-upload-list">
												<img class="layui-upload-img" style="width: 120px;" id="demo2">
												<p id="demoText2"></p>
											</div>
										</div>
									</div>
								</div>

								<div class="layui-form-item" pane="">
									<label class="layui-form-label">强制关注</label>
									<div class="layui-input-block">
										<input type="checkbox" name="focus[focus1]" lay-skin="primary" title="抢购活动" checked="">
										<input type="checkbox" name="focus[focus2]" lay-skin="primary" title="超级券">
										<input type="checkbox" name="focus[focus3]" lay-skin="primary" title="拼团商城">
										<input type="checkbox" name="focus[focus4]" lay-skin="primary" title="团购活动">
									</div>
									<p class="ptips">用户购买下单时，可以强制用户关注公众号以后购买商品</p>
								</div>
								
							</div>
							<button class="layui-btn" lay-submit="submit" lay-filter="formDemo" style="margin: 10px 10px 0px 0px">提交</button>
						</form>
					</div>
				</div>
			</div>
		</div>

		<script src="layui/layui.js"></script>
		<script src="./js/jquery-3.2.1.min.js"></script>
		<script src="./js/vue2.5.16.js"></script>
		<script src="./js/public.js"></script>
		<script src="js/data.js"></script>
		<script>
			new Vue({
				el: "#backstage",
				data: {
					header: data.header,
					side: data.side,
				}
			})

			layui.use(['form', 'upload'], function() {
				var form = layui.form,
					upload = layui.upload;
				//分享图片上传
				var uploadInst = upload.render({
					elem: '#test1',
					url: '',
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#demo1').attr('src', result); //图片链接（base64）
						});
					},

					done: function(res) {
						//如果上传失败
						if(res.code > 0) {
							return layer.msg('上传失败');
						}
						//上传成功
					},

					error: function() {
						//演示失败状态，并实现重传
						var demoText = $('#demoText');
						demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					}
				})

				//二维码图片上传
				var uploadInst2 = upload.render({
					elem: '#test2',
					url: '',
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#demo2').attr('src', result); //图片链接（base64）
						});
					},

					done: function(res) {
						//如果上传失败
						if(res.code > 0) {
							return layer.msg('上传失败');
						}
						//上传成功
					},

					error: function() {
						//演示失败状态，并实现重传
						var demoText2 = $('#demoText2');
						demoText2.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
						demoText2.find('.demo-reload').on('click', function() {
							uploadInst2.upload();
						});
					}
				})

				//监听提交
				form.on('submit(formDemo)', function(data) {
					console.log(JSON.stringify(data.field));
					return false;
				});
			});
		</script>
	</body>

</html>